<template>
  <div class="add-family-main base-main">
    <van-field v-model="userName" label="家人姓名" placeholder="请输入姓名"/>
    <van-field v-model="phoneNum" type="tel" label="手机号" placeholder="请输入手机号"/>
    <van-field
      v-model="code"
      center
      label="验证码"
      placeholder="请输入验证码"
    >
      <template #button>
        <span class="color3D7EFF fs15" @click="getCode">{{codeTxt}}</span>
      </template>
    </van-field>

    <div class="btn-box pdlr15">
      <span class="base-btn" @click="addFamily">
        确认添加
      </span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { Toast, Dialog } from 'vant'
  export default {
    data() {
      return {
        userName: '',
        phoneNum: '',
        code: '',
        codeTxt: '获取验证码',
        isCode: false,
      }
    },
    methods: {
      getCode() {
        const _this = this
        if(_this.isCode)return false;
        _this.isCode = true
        let time = 60
        _this.codeTxt = '60s'
        let timer = setInterval(() => {
          if(time === 0) {
            clearInterval(timer)
            _this.codeTxt = '获取验证码'
            _this.isCode = false
          } else {
            time--
            _this.codeTxt = `${time}s`
          }
        }, 1000)
      },
      addFamily() {
        const _this = this
        let phoneTest = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
        if(!_this.userName) {
          Toast('请填写家人姓名')
          return false
        }

        if(!_this.phoneNum) {
          Toast('请填写家人手机号')
          return false
        }
        if (!phoneTest.test(_this.phoneNum)) {
          Toast("请填写正确手机号")
          return false
        }

        if(!_this.code) {
          Toast("请填写验证码")
          return false
        }
//        console.log(_this.userName);
//        console.log(_this.phoneNum);
//        console.log(_this.code);
        _this.$ajax({
          url: '/addFmaily',
          method: 'post'
        },{
          username: _this.userName,
          phone: _this.phoneNum,
          code: _this.code
        }).then(res => {
          Toast('添加成功')
          setTimeout(() => {
            _this.$router.replace({
              name: 'bindingFamily'
            })
          }, 3000)
        })
      },
    },
  }
</script>

<style scoped lang="scss">
@import "../../assets/css/healthMonitoring/addFamily";
</style>
